import Styles from './index.module.less';
import {Picker,View,Image} from '@tarojs/components';
import Taro,{useDidShow} from '@tarojs/taro';
import InvertTriangle from '../../images/book/b_tri.png'
import { useState } from 'react';
import {getGlobalData,Request} from '../../util';
import { Style } from '@tarojs/runtime';
export default function index(props){

    const {style} = props;
    const domain = getGlobalData("domain");

    const [selectedTreatment, setSelectedTreatment] = useState(Taro.getStorageSync("selectedTreatment"));
    const [treatmentList, setTreatmentList] = useState([]);
    const [thumbnail,setThumbnail] = useState("");
    const [mins, setMins] = useState("");

    const getTreatmentList = () => {
        Request(domain+"/client/treatment/treatmentNameListForBookPage",{treatment:Taro.getStorageSync('selectedTreatment')}).then((res)=>{
            
            setTreatmentList(res.data.data);
        });
    }

    const handleChange = (e) => {

        let selectedTreatment = treatmentList[e.detail.value];
        setSelectedTreatment(selectedTreatment);
        Taro.setStorageSync("selectedTreatment", selectedTreatment);
        getTreatment(selectedTreatment);
    
    }

    const getTreatment = (treatment) => {
        Request(domain+"/client/treatment/treatmentForDetailPage",{name:treatment}).then((res)=>{
            let data = res.data.data;
            setThumbnail(data.thumb_url);
            setSelectedTreatment(data.name);
            setMins(data.mins);
        });
    }
        
    useDidShow(()=>{
        
        let selectedTreatment = Taro.getStorageSync("selectedTreatment");
        if(selectedTreatment){
            getTreatment(selectedTreatment);
        }
        getTreatmentList();
    })
 

    useState(()=>{
       
    },[])

    return (
        <view>
            { !selectedTreatment &&
                <view class={Styles.unselected_treatment_selector} style={style}>
                    <Picker class={Styles.unselected_treatment_picker} value={selectedTreatment} mode="selector" range={treatmentList} onChange={handleChange}>
                        <View class={Styles.tip}>请选择疗程</View>
                        <Image src={InvertTriangle} class={Styles.img}></Image>
                    </Picker>
                </view>
            }

            {
                selectedTreatment &&
                <view class={Styles.selected_treatment_selector}>
                    <Picker class={Styles.select_treatment_picker} mode="selector" range={treatmentList} onChange={handleChange}>
                        <Image src={thumbnail} class={Styles.img}/>
                        <view class={Styles.info}>
                            <view class={Styles.name}>{selectedTreatment}</view>
                            <view class={Styles.mins}>时长：{mins}分钟</view>
                        </view>
                    </Picker>
                </view>
            }
        </view>
        
        
    )
}